作品六：移动端 PWA 应用
在线体验
一、定位与价值
| 视角 | 说明 |
|---|---|
| 终端 | 移动浏览器 / 添加到主屏幕，贴近巡检、外勤、车间看板 |
| 体验 | PWA：Service Worker 缓存策略、manifest 安装属性（依浏览器支持） |
| 离线 | 弱网或短时断网下的 壳层与静态壳缓存（业务数据仍以安全为先） |
对应仓库：projects/mobile-PWA（Vue 3 Web + NestJS API）。
二、技术架构
text
移动端浏览器（/mobile-pwa/）
↓
Nginx 静态资源 + HTTPS（SW 要求安全上下文）
↓ REST / WS
NestJS（/api-mobile-pwa/）
↓
MySQL 等- API 前缀：
api-mobile-pwa，与网关 location、环境变量一致。 - 实时：可按业务启用 Socket.IO（路径
/mobile-pwa-socket.io/）。
三、技术栈（摘录）
| 层级 | 技术 |
|---|---|
| 前端 | Vue 3、TypeScript、Vite、移动端适配（viewport / rem / vw） |
| PWA | manifest.webmanifest、Service Worker（缓存策略按环境裁剪） |
| 后端 | NestJS、JWT、业务模块 |
四、工程维度说明
| 维度 | 说明 |
|---|---|
| 适配 | 安全区、横竖屏、软键盘顶起输入框 |
| 性能 | 分包、图片懒加载、骨架屏；避免首包过大 |
| 兼容 | iOS Safari 与 Chrome Android 对 PWA、推送策略差异大，需真机验证 |
| 安全 | HTTPS；SW 更新策略避免长期缓存过期接口页 |
五、边界说明
完整推送（Push）依赖浏览器与证书策略；演示环境可能关闭部分能力以降低运维复杂度。